<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<search></search>
	<!-- <navigation></navigation> -->
	<!-- <test style="margin: 20px;"></test> -->
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration"  >
				<swiper-item v-for="(item, index) in banner">
					<view class="swiper-item uni-bg-red">
						<image style=" background-color: #eeeeee;"  :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

		

	</view>
</template>
<script>
	import search from "@/components/search.vue"
	import navigation from "@/components/navigation.vue"
	import test from "@/components/test.vue"
export default {
	components:{search,navigation,test},
    data() {
        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
			banner:[
				{"image":"/static/images/banner/banner_01.jpeg","link":"http://www.baidu.com"},
				{"image":"/static/images/banner/banner_02.jpeg","link":"http://www.baidu.com"}
			]
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>
<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		
	}
	.swiper {
		height: 300rpx;
		width: 100%;
		
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		width: 100%;
		line-height: 300rpx;
		text-align: center;
		
	}
	image{
		width: 100%;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
		
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
